<template>
  <div>
    <el-cascader
      v-model="currentValue"
      :options="provinceOptions"
      @active-item-change="provinceHandleItemChange"
      :props="{
        label: 'criName',
        value: 'criCode',
        children: 'children',
      }"
      class="input-width"
    >
    </el-cascader>
  </div>
</template>

<script>
import { province } from '@/api/servDept'

export default {
  name: 'SingleAddress',
  data () {
    return {
      currentValue: [],
      provinceOptions: [],
      prodReleaseAreaList: [{
        provName: '',
        provCode: '',
        cityName: '',
        cityCode: '',
        countyName: '',
        countyCode: ''
      }]

    }
  },
  methods: {
    // 初始化城市数据
    // prodReleaseAreaList：设置初始化后默认选中城市
    init (prodReleaseAreaList) {
      province({ code: '', level: 1 }).then(res => {
        if (prodReleaseAreaList) {
          const { provCode, cityName, cityCode, countyCode, countyName } = prodReleaseAreaList

          this.provinceOptions = res.data.map((item) => {
            if (item.criCode === provCode) {
              item.children = [{
                criCode: cityCode,
                criName: cityName,
                children: [{
                  criCode: countyCode,
                  criName: countyName
                }]
              }]
            } else {
              item.children = []
            }
            return item
          })
        } else {
          this.provinceOptions = res.data.map((item) => {
            return {
              ...item,
              children: []
            }
          })
        }
      })
    },
    // 设置选中的城市code
    setDefValue (value) {
      this.currentValue = value
    },
    // 获取城市code
    getSelectList () {
      return this.currentValue
    },
    // 获取选中城市code和城市名
    getProdReleaseAreaList () {
      this.provinceOptions.map((item, index) => {
        if (item.criCode === this.currentValue[0]) {
          this.prodReleaseAreaList[0].provName = item.criName
          this.prodReleaseAreaList[0].provCode = item.criCode
          this.provinceOptions[index].children.map((item, i) => {
            if (item.criCode === this.currentValue[1]) {
              this.prodReleaseAreaList[0].cityName = item.criName
              this.prodReleaseAreaList[0].cityCode = item.criCode
              this.provinceOptions[index].children[i].children.map((item) => {
                if (item.criCode === this.currentValue[2]) {
                  this.prodReleaseAreaList[0].countyName = item.criName
                  this.prodReleaseAreaList[0].countyCode = item.criCode
                }
              })
            }
          })
        }
      })
      return this.prodReleaseAreaList
    },
    provinceHandleItemChange (val) {
      const level = val.length + 1
      const code = val[val.length - 1]
      province({ code, level }).then(res => {
        if (level === 2) {
          this.provinceOptions.map((item, index) => {
            if (item.criCode === code) {
              this.provinceOptions[index].children = res.data.map((item) => {
                return {
                  ...item,
                  children: []
                }
              })
            }
          })
        }
        if (level === 3) {
          this.provinceOptions.map((item, index) => {
            this.provinceOptions[index].children.map((item, i) => {
              if (item.criCode === code) {
                this.provinceOptions[index].children[i].children = res.data
              }
            })
          })
        }
      })
    },
    reset (keepOptions) {
      this.prodReleaseAreaList = [{
        provName: '',
        provCode: '',
        cityName: '',
        cityCode: '',
        countyName: '',
        countyCode: ''
      }]
      this.currentValue = []
      if (keepOptions) return
      this.provinceOptions = []
    }

  }
}
</script>
<style scoped>
.input-width {
  width: 80%;
}
</style>
